<template>
  <div id="aaa">
    <Back class="back" />
    <h2 class="sdkfjs">编辑资料</h2>
    <el-form ref="form" :model="userVo" label-width="15%">
      <el-form-item label="昵称" size="medium">
        <el-input v-model="userVo.nickname"></el-input>
      </el-form-item>
      <el-form-item label="职业">
        <el-input v-model="userVo.userWork"></el-input>
      </el-form-item>
      <el-form-item label="城市">
        <el-input v-model="userVo.userCity"></el-input>
      </el-form-item>

      <el-form-item label="生日时间">
        <el-col :span="11">
          <el-date-picker
            v-model="userVo.userBirthday"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="userVo.userSex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存修改</el-button>
        <el-button @click="aa">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- <el-button id="sfdadfa" type="text" @click="open">注销账号</el-button> -->
  </div>
</template>

<script>
import { Edituser } from "@/api";
import Back from "../../../components/Back.vue";
export default {
  components: { Back },
  created() {
    this.userVo = this.$route.query.list;
  },
  data() {
    return {
      userVo: {},
    };
  },
  methods: {
    aa() {
      this.$router.push("/myCenter");
    },
    onSubmit() {
      Edituser(this.userVo).then((res) => {
        this.$toast({
            message:'修改成功',
            icon:'success'
        })
        this.$router.push("/myCenter");
      });
    },
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.el-input__icon{
  font-size: 3vw;
  margin-top: 1vh;
  margin-left: 1vw;
  margin-right: 3vw;
}
.el-date-picker__header-label{
font-size: 4vw;
}
.el-input__inner{
  text-indent: 2vw;
}
.el-button--primary{
  font-size: 2.8vw;
}
.el-button--default{
  font-size: 2.8vw;
}
.el-date-table{
  font-size: 3vw;
}
.el-date-table td{
  padding:1vh 3vw;
}
.el-date-picker{
  width: 60vw;
  height: 60vw;
}
.el-picker-panel__body{
  font-size: 5vw;
  box-sizing: border-box;
  margin-top: 1vh;
}
.el-date-picker .el-picker-panel__content{
  margin-top: 3vh;
  text-align: center;
  margin-left: 5vw;
  box-sizing: border-box;
  width: 50vw;
}
.el-form-item {
  margin-bottom: 3vh;
}
.van-toast{
    width: 14vh;
    height: 14vh;
}
.van-toast__icon{
    font-size: 15vw;
}
.van-toast__text{
    font-size: 3vw;
}
</style>

<style scoped>
.el-form-item {
  height: 9vw;
  line-height: 9vw;
  font-size: 3vw;
}
.el-form-item__label {
  font-size: 3vw;
}
#aaa{
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}
#aaa >>> .el-picker-panel {
  width: 80vw;
  height: 80vh;
  background: yellow;
}
#aaa >>> .el-date-picker {
  width: 80vw;
  height: 80vh;
  background: yellow;
}
#aaa >>> .el-input__inner {
  height: 8vw;
  font-size: 3vw;
  width: 60vw;
  line-height: 8vw;
}
#aaa >>> .el-form {
  box-sizing: border-box;
  margin-left: 10vw;
  margin-top: 20vw;
}
#aaa >>> .el-message-box {
  width: 30vw;
}
#aaa >>> #sfdadfa {
  text-align: center;
  border-radius: 3vw;
  font-size: 3vw;
  width: 22vw !important;
  color: #999;
  border: 1px solid #999;
  padding: 1.2vh 2vh;
}
#aaa {
  width: 100vw;
  height: 100vh;
  padding-top: 0.6vh;
  box-sizing: border-box;
}
#aaa .sdkfjs {
  height: 5vh;
  line-height: 5vh;
  text-align: center;
  font-size: 4.2vw;
}
#aaa >>> .el-form-item__label {
  line-height: 9vw;
  font-size: 3vw;
}
#aaa >>> .el-radio-group {
  height: 9vw;
  line-height: 9vw;
  font-size: 3vw;
}
#aaa >>> .el-radio__inner {
  width: 3vw;
  height: 3vw;
}
#aaa >>> .el-radio__label {
  font-size: 3vw;
  line-height: 9vw;
}
#aaa >>> .el-button {
  width: 15vw;
  height: 7vw;
  margin-right: 3vw;
}
</style>